var date = [
    { selected: '1', receiptNumber: '20220704003', fileNumber: '012022000001', location: '001-001-01-01', state: '退案' },
    { selected: '2', receiptNumber: '20220704003', fileNumber: '012022000002', location: '001-001-01-01', state: '退案' },
    { selected: "3", receiptNumber: '20220704003', fileNumber: '012022000003', location: '001-001-01-02', state: '退案' },
    { selected: "4", receiptNumber: '20220704004', fileNumber: '012022000004', location: '001-001-01-02', state: '退案' },
    { selected: "5", receiptNumber: '20220704004', fileNumber: '012022000005', location: '001-001-01-03', state: '退案' },
    { selected: "6", receiptNumber: '20220704004', fileNumber: '012022000006', location: '001-001-01-03', state: '退案' },
    { selected: "7", receiptNumber: '20220704005', fileNumber: '012022000007', location: '001-001-01-04', state: '退案' },
    { selected: "8", receiptNumber: '20220704005', fileNumber: '012022000008', location: '001-001-01-04', state: '退案' },
    { selected: "9", receiptNumber: '20220704006', fileNumber: '012022000009', location: '001-001-01-05', state: '退案' },
    { selected: "11", receiptNumber: '20220704007', fileNumber: '0120220000010', location: '001-001-01-05', state: '退案' },
    { selected: "12", receiptNumber: '20220704007', fileNumber: '0120220000010', location: '001-001-01-06', state: '退案' },
    { selected: "13", receiptNumber: '20220704008', fileNumber: '0120220000011', location: '001-001-01-06', state: '退案' },
    { selected: "14", receiptNumber: '20220704008', fileNumber: '0120220000011', location: '001-001-01-07', state: '退案' },
    { selected: "15", receiptNumber: '20220704009', fileNumber: '0120220000012', location: '001-001-01-08', state: '退案' },
    { selected: "16", receiptNumber: '20220704009', fileNumber: '0120220000012', location: '001-001-01-09', state: '退案' },
    { selected: "17", receiptNumber: '202207040010', fileNumber: '0120220000013', location: '001-001-01-10', state: '退案' },
    { selected: "18", receiptNumber: '202207040011', fileNumber: '0120220000013', location: '001-001-01-11', state: '退案' },
    { selected: "19", receiptNumber: '202207040012', fileNumber: '0120220000014', location: '001-001-01-12', state: '退案' },


];
//当前的页码
var page = 1;
//一页的条数
var count = 8;
var delId;
var dateClone = cloneArr(date);
var oTbody = document.querySelector('tbody');
var oPage = document.querySelector('.pagination');
var oNextPage = document.querySelector('.next');
var oPrevPage = document.querySelector('.prev');
var oSearchInp=document.querySelector('.searchInp');
var oSearchInp2=document.querySelector('.searchInp2');
var oSearchBtn=document.querySelector('.searchBtn');
var oAddBtn=document.querySelector('.addBtn');
var oEditBtn=document.querySelector('.editBtn');
var oDelBtn=document.querySelector('.delBtn');
var oResetBtn=document.querySelector('.resetBtn');
var oSaveReset=document.querySelector('.saveResetBtn');
var addInpValue=false;
var os= document.querySelector('select option');

function render(){

    var str1=oSearchInp.value;
    var str2=oSearchInp2.value;
    var date1=[];
   
    for(var i=0;i<date.length;i++){
        date[i].selected=i+1;
    }
    var searchDate=[];
    if(str1.trim()==''){
      date1=date;
       
    }else{
        date1=date.filter(function(v){
            return v.receiptNumber.includes(str1);
        })

    }

    if(str2.trim()==''){
        searchDate=date1;
         
      }else{
        searchDate=date1.filter(function(v){
              return v.fileNumber.includes(str2);
          })
  
      }
        
    
    
   
    oTbody.innerHTML='';
    var renderArr = searchDate.slice((page - 1) * count, page * count);
    for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement('tr');
    oTr.innerHTML = `
                <td>${renderArr[i].selected}</td>
                <td>${renderArr[i].receiptNumber}</td>
                <td>${renderArr[i].fileNumber}</td>
                <td>${renderArr[i].location}</td>
                <td>${renderArr[i].state}</td>
                <td>
                <button class="btn btn-primary edit">编辑</button>
                <button class="btn btn-danger del">删除</button>
                </td>
    `;
    oTbody.appendChild(oTr);
    delId='';
}
//渲染页码
var aPageBtn=document.querySelectorAll('.pageBtn');
for(var i=0;i<aPageBtn.length;i++){
    oPage.removeChild(aPageBtn[i].parentNode);
}
for (var i = 1; i <= Math.ceil(searchDate.length / count); i++) {
    var oLi = document.createElement('li');
    oLi.innerHTML = `<a class="pageBtn" >${i}</a>`;
    //oLi.classList.add('pageBtn');
    if(i==page){
        oLi.classList.add('active');
    }
    oPage.insertBefore(oLi,oPage.lastElementChild);

}
}
render();
//给分页加事件
oPage.addEventListener('click',changePage);
function changePage(){
    if(event.target.className=='pageBtn'){
        // var aPageBtn=document.querySelectorAll('.pageBtn');
        // for(var i=0;i<aPageBtn.length;i++){
        //     aPageBtn[i].parentNode.classList.remove('active');
        // }
        // event.target.parentNode.classList.add('active');

        page=event.target.innerHTML;
        render();
    }
}
//上一页下一页事件
oPrevPage.addEventListener('click',prevFn);
function prevFn(){
    if(page>1){
        page--;
        render();
    }
}
oNextPage.addEventListener('click',nextFn);
function nextFn(){
    if(page<Math.ceil(date.length / count)){
        page++;
        render();
    }
}
//搜索事件
oSearchBtn.addEventListener('click',searchFn);
function searchFn(){
   page=1;
   render();
}
//入库保存事件
oAddBtn.addEventListener('click',addFn);
function addFn(){
    var addId=document.querySelector('.addId').value;
    var addFile=document.querySelector('.addFile').value;
    var addLocation=document.querySelector('.addLocation').value;
    var addState=document.querySelector('.addState').value;

    date.push({
        receiptNumber:addId,
        fileNumber:addFile,
        location:addLocation,
        state:addState,
    })
    render();
    $('#addModal').modal('hide');
    console.log(os.value);
}
//修改事件
oTbody.addEventListener('click',editFn);
function editFn(){
   
    if(event.target.className.includes('edit')){
        $('#editModal').modal('show');
        var id=event.target.parentNode.parentNode.children[2].innerText;
        for(var i=0;i<date.length;i++){
            if(date[i].fileNumber==id){
                document.querySelector('.editId').value=date[i].receiptNumber;
                document.querySelector('.editFile').value=date[i].fileNumber;
                document.querySelector('.editLocation').value=date[i].location;
                document.querySelector('.editState').value=date[i].state;
            }
        }
       
    }
}
//点击修改的保存
oEditBtn.addEventListener('click',editSave);
function editSave(){
    var id=document.querySelector('.editFile').value;
    for(var i=0;i<date.length;i++){
        if(date[i].fileNumber==id){
            date[i].location=document.querySelector('.editLocation').value;
            date[i].state=document.querySelector('.editState').value;
        }
    }
    $('#editModal').modal('hide');
    render();
}
//删除事件
oTbody.addEventListener('click',delFn);
function delFn(){
    if(event.target.className.includes('del')){
        $('#delModal').modal('show');
        delId=event.target.parentNode.parentNode.children[2].innerText;
    }
 
   
}
oDelBtn.addEventListener('click',saveDel);
function saveDel(){
     var id=delId;
        for(var i=0;i<date.length;i++){
            if(date[i].fileNumber==id){
                date.splice(i,1);
            }
        }
        $('#delModal').modal('hide');
        render();
    }
    //重置事件
 oResetBtn.addEventListener('click',resetFn);
function cloneArr(obj){
   return JSON.parse(JSON.stringify(obj));
}
function resetFn(){
    $('#resetModal').modal('show');
   
}
oSaveReset.addEventListener('click',saveReset);
function saveReset(){
     var formInp=document.querySelectorAll('.input-area input');
    formInp[0].value = "";
    formInp[1].value = "";
    dateClone=cloneArr(date);
    $('#resetModal').modal('hide');
    render(dateClone);
}
var ruler = [
    {reg:/^\d{11}$/},
    {reg:/^0\d{11}$/},
    {reg:/^\d{3}-\d{3}-\d{2}-\d{2}$/},
    // {reg:/^退案||未退案$/}
];
var addInp=document.querySelectorAll('#addModal input');

for (var i=0;i<addInp.length;i++){
    (function (p){
        addInp[i].addEventListener('input',function(e){
            
            if(ruler[p].reg.test(this.value)){
                addInpValue=true;
                addInp[p].style.boxShadow='0 0 5px #3c763d';
            }else if(ruler[p].reg.test(this.value)==false){
                addInpValue=false;
                addInp[p].style.boxShadow='0 0 5px red';
            }
        });
    })(i);
}